<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>router_3_4-嵌套路由</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

   
        <div id="app">
            <h1>你好呀，用户中心!</h1>
            <router-link to="/">回到首页</router-link> <br />
            <router-link to="/about">去关于页</router-link> <br />
            <router-link to="/user/用户中心">用户中心</router-link> <br />
            <router-view></router-view>
            <script>
                const Home = { template: '<div>欢迎来到首页</div>' }
                const About = { template: '<div>欢迎来到关于页</div>' }
                const User = {
                    template: `
                <h2>欢迎来到用户中心，您当前的参数为：{{ $route.params.id }}</h2>
                <ol>
                    <router-link to="/user/用户中心">用户中心</router-link> <br />
                    <router-link to="/user/用户中心/profile">用户中心 - profile</router-link> <br />
                    <router-link to="/user/用户中心/posts">用户中心 - posts</router-link> <br />
                </ol>
                
                <router-view></router-view>
                ` ,

                }

                //匹配空路由
                const UserHome = { template: '欢迎来到UserHome页<br />当前参数：{{ $route.params.id }}' }

                //匹配profile路由
                const UserProfile = { template: '欢迎来到UserProfile页<br />当前参数：{{ $route.params.id }}' }

                //匹配Posts路由
                const UserPosts = { template: '欢迎来到UserPosts页<br />当前参数：{{ $route.params.id }}' }

                const routes = [
                    { path: '/', component: Home },
                    { path: '/about', component: About },

                    //用户中心路由
                    {
                        path: '/user/:id',
                        component: User,
                        children: [
                            // 当 /user/:id 匹配成功
                            // UserHome 将被渲染到 User 的 <router-view> 内部
                            {
                                path: '',
                                component: UserHome
                            },

                            {
                                // 当 /user/:id/profile 匹配成功
                                // UserProfile 将被渲染到 User 的 <router-view> 内部
                                path: 'profile',
                                component: UserProfile,
                            },
                            {
                                // 当 /user/:id/posts 匹配成功
                                // UserPosts 将被渲染到 User 的 <router-view> 内部
                                path: 'posts',
                                component: UserPosts,
                            },
                        ],
                    },
                ]

                const router = VueRouter.createRouter({
                    history: VueRouter.createWebHashHistory(),
                    routes,
                })
                const app = Vue.createApp({})
                app.use(router)
                app.mount('#app')
            </script>
    </body>

</html>